<template>
  <div class="article-card">
    <header-user :user="props.article.user" :time="props.article.updateTime" />
    <div class="main" @click="onClickCard">
      <div class="title">{{ props.article.name }}</div>
      <div class="content van-multi-ellipsis--l3">
        {{ props.article.content }}
      </div>
      <div class="imgs" v-if="props.article.imgList.length">
        <van-image :src="props.article.imgList[0]" fit="scale-down" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { articleListRes } from '../service/article/types'
import HeaderUser from './header-user.vue'

const props = defineProps<{
  article: articleListRes.Article
}>()
const router = useRouter()

const onClickCard = () => {
  router.push(`/article/${props.article.id}`)
}
</script>

<style lang="scss" scoped>
.article-card {
  background-color: #fff;
  border-radius: 10px;
  margin: 8px 0;
  padding: 0 8px;
  max-height: 420px;
  overflow: hidden;
  .main {
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--van-text-color);
    }
    .content {
      margin: 5px 0;
      color: var(--van-gray-8);
    }
    .imgs {
      padding-bottom: 10px;
      overflow: hidden;
      max-height: 250px;
      :deep(.van-image__img) {
        max-height: 250px;
        border-radius: 5px;
      }
    }
  }
}
</style>
